<template>
	<view>
		<nav-bar color="#000000" bgc="#ffffff" bbtn>收货地址</nav-bar>
		<!-- 新增按钮 -->
		<view class="section-1">
			<view class="newAddressBtn" @click="gotoNewAddress">
				<image src="../../static/image/address/icon_zzj@3x.png" mode=""></image>
				<text>新增地址</text>
			</view>
		</view>
		<!-- 地址列表 -->
		<view class="section-2">
			<view class="address" v-for="item in allData" :key="item.id">
				<view class="message" @click.stop="choseAddress(item)">
					<view class="choseBtn">
						<image src="../../static/image/address/icon_gxzz@3x.png" mode="" v-if="item.is_default==1"></image>
						</view>
					<view class="name">{{item.name}}</view>
					<view class="mobile">{{item.mobile}}</view>
					<view class="modify"><image @click.stop="editAddress(item)" src="../../static/image/address/icon_pjj@3x.png" mode=""></image></view>
				</view>
				<view class="addressDetail">{{item.province}}&nbsp;&nbsp;{{item.address}}</view>
			</view>
			<!-- 缺省页 -->
			<view class="noAddress">
				<view class="img"><image src="../../static/image/address/img_zwzd@3x.png" mode=""></image></view>
				<view class="text">暂无新增地址，请尽快添加</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			token:"123456798",
			allData:{}
		};
	},
	methods: {
		gotoNewAddress:function(){
			uni.navigateTo({
				url:"./newAddress?jumpType=1"
			})
		},
		editAddress:function(item){
			uni.navigateTo({
				url:"./newAddress?jumpType=2&addressInfo="+encodeURIComponent(JSON.stringify(item))
			})
		},
		//选择地址
		choseAddress:function(item){
			this.editAddress(item)
		},
		canChoseAddress:function(item){
			let arr ={
				name:item.name,
				address:item.address,
				address_id:item.id,
				mobile:item.mobile,
				province:item.province,
			}
			uni.setStorageSync('orderAddress',arr)
			uni.navigateBack({
				url:'../order/orderPay'
			})
		}
	},
	onLoad:function(option){
		this.jumpType = option.jumpType
	},
	onShow:function(){
		let _this = this
		let param = {
			"token":this.token,
		}
		this.ajaxJson('collectAddressList',param,function(data){
			console.log(data);
			_this.allData = data
		})
		if(this.jumpType==1){
			this.choseAddress = this.canChoseAddress
		}
	}
};
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		font-size: 0.75rem;
		box-sizing: border-box;
	}
.section-1 {
	background-color: #ffffff;
	width: 100%;
	height: 200rpx;
	margin-top: 80rpx;
	padding-top: 20rpx;

	.newAddressBtn {
		width: 90%;
		height: 100rpx;
		margin: 50rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background: linear-gradient(to right, #fd6431, #fea789);
		border-radius: 20rpx;
		text-align: center;
		line-height: 100rpx;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
}
.section-2 {
	width: 100%;
	position: fixed;
	top: 320rpx;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	// 地址列表
	.address {
		width: 100;
		padding: 30rpx;
		border-bottom: 1px #eee solid;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		.message {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.choseBtn {
				width: 40rpx;
				height: 40rpx;
				border: 1px #909090 solid;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			.name,
			.mobile {
				margin: 0 20rpx;
			}
			.modify {
				margin-left: auto;
				width: 40rpx;
				height: 40rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.addressDetail {
			margin: 20rpx 0 0;
			color: #AAAAAA;
		}
	}

	//缺省页
	.noAddress {
		display: none; //隐藏缺省页面
		.img {
			width: 400rpx;
			height: 400rpx;
			margin: 150rpx auto 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.text {
			width: 50%;
			margin: 50rpx auto;
			color: #aaaaaa;
		}
	}
}
</style>
